<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Modal - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <style>
      :root {
        --ion-safe-area-top: 20px;
        --ion-safe-area-bottom: 20px;
        --ion-safe-area-right: 20px;
        --ion-safe-area-left: 20px;
      }
    </style>
  </head>

  <body>
    <ion-app>
      <div class="ion-page">
        <ion-header>
          <ion-toolbar>
            <ion-title>Modal - Basic</ion-title>
          </ion-toolbar>
        </ion-header>

        <ion-content class="ion-padding">
          <p>
            <ion-button id="basic-modal" onclick="presentModal()">Present modal</ion-button>
          </p>
          <p>
            <ion-button id="presentModal" class="e2ePresentModal" onclick="presentCloseModal()"
              >Present and close modal</ion-button
            >
          </p>
          <p>
            <ion-button id="presentModal" class="e2ePresentModal" onclick="presentCloseModal2()"
              >Present and close modal (crash)</ion-button
            >
          </p>
        </ion-content>
      </div>
    </ion-app>

    <script>
      window.addEventListener('ionModalDidDismiss', function (e) {
        console.log('DidDismiss', e);
      });
      window.addEventListener('ionModalWillDismiss', function (e) {
        console.log('WillDismiss', e);
      });

      function createModal() {
        // create component to open
        const element = document.createElement('div');
        element.innerHTML = `
      <ion-header>
        <ion-toolbar>
          <ion-title>Super Modal</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <h1>Content of doom</h1>
        <div>Here's some more content</div>
        <ion-button class="dismiss">Dismiss Modal</ion-button>
      </ion-content>
      `;

        // present the modal
        const modalElement = Object.assign(document.createElement('ion-modal'), {
          component: element,
          htmlAttributes: {
            'data-testid': 'basic-modal',
          },
        });
        // listen for close event
        const button = element.querySelector('ion-button');
        button.addEventListener('click', () => {
          modalElement.dismiss();
        });
        document.body.appendChild(modalElement);
        return modalElement;
      }

      async function presentModal() {
        const presentingEl = document.querySelectorAll('.ion-page')[1];
        const modal = createModal();
        await modal.present(presentingEl);
      }
      async function presentCloseModal() {
        const modal = createModal();
        await modal.present();
        await modal.dismiss();
      }

      async function presentCloseModal2() {
        const modal = createModal();
        modal.present();
        setTimeout(() => {
          modal.dismiss();
        }, 20);
      }
    </script>
  </body>
</html>
